<template>
	<div class="bottom">
		<div class="left">
			<span @click="changeSong('pre')">
				<i class="iconfont icon-icon-1"></i>
			</span>
			<span @click="togglePlayState">
				<i :class="!this.palyState ? 'icon-bofang':''" class="iconfont icon-zanting"></i>
			</span>
			<span @click="changeSong('next')">
				<i class="iconfont icon-icon-"></i>
			</span>
		</div>
		<div class="center">
			<span v-if = "this.curPlaySong && this.curPlaySong !== ''">正在播放：{{curPlaySong}}</span>
			<span v-else>当前没有可播放的歌曲</span>
			<el-progress :text-inside="true" :stroke-width="2" :percentage="curpercent > 100?100:curpercent" :show-text="false"></el-progress><span>{{curpercent | durationFormat}}<em>/ {{Songduration | durationFormat}}</em></span>
		</div>
		<div class="right">
			<span><i class="iconfont icon-more"></i></span>
			<span><i class="iconfont icon-playlistplay"></i></span>
		</div>
		 <audio ref="audio" id="audio" @timeupdate="updateTime" @ended = "ended" controls="controls" autoplay>
		</audio>
	</div>
</template>
<script type="text/javascript">
	import {mapState,mapGetters} from 'vuex'
	export default{
		data(){
			return {
				curPlayIndex:0,
				curpercent:0
			}
		},
		props:['percent'],
		computed:{
			// 从vuex 中拿数据
			...mapState([
				"palyState",
				"curPlayList",
				"curPlaySong",
				"SongIndex",
			]),
			...mapGetters(["songName","Songduration","Audio"]),
		},
		filters:{
			durationFormat(val){
				let time = parseInt(val);
				if (time < 10) {
					return "00:0"+val;
				}else if(time < 60){
					return "00:"+val;
				}else{
					return "0"+parseInt(time/60)+":"+ (time%60 >= 10 ? time%60:"0"+time%60);
				}
			},
		},

		methods:{
			togglePlayState(){
				this.$store.commit('setPlayState');
			},
			changeSong(arg){
				let curIndex = this.SongIndex;
				arg === 'next' ? curIndex++ : curIndex--;
				this.$store.dispatch('changeSong',curIndex);
			},
			// 设置当前歌曲播放时间进度
			updateTime(e){
				// console.log(parseInt(e.target.currentTime));
				this.curpercent = parseInt(e.target.currentTime);
			},
			// 歌曲播放完 触发
			ended(){
				console.log('上一首歌曲播放完了哦');
				this.curPlayIndex++;
				if (this.curPlayIndex < this.curPlayList.length) {
					this.StartPlay(this.curPlayIndex);
					console.log("正在播放:"+this.curPlayList[this.curPlayIndex].id);
				}else{
					this.openCenter('列表播放完毕','warning');
					this.$store.commit('setPlayState');
				}
			},
			// 消息提示
			openCenter(msg,type = '') {
				this.$message({
					message: msg,
					center: true,
					type:type
				});
			},
			// 获取歌单列表
			songSheet(id){
				this.$http.get("/cloudmusic/?type=playlist&id="+id).then((res)=>{
					let playArr = [];
					res.data.playlist.tracks.forEach((val,index)=>{
						if (index < 30) {
						    playArr.push({name:val.name,id:val.id});
						}
					})
					this.$store.commit('setPlayList',playArr);
					// console.log("当前播放30个列表:" + this.curPlayList);
					// 消息提示
					this.openCenter('已将该歌单前30首加入播放列表','success');
					// 传入SongIndex 开始播放
					this.StartPlay(0);
				})
			},
			// 传入歌曲SongIndex 开始播放 方法
			StartPlay(SongIndex){
				const audio = this.$refs.audio;
				this.$store.commit('setAudio',audio);
				this.$store.commit('setcurPlaySong',this.curPlayList[SongIndex].name);
				this.$store.commit('setaudioSrc',this.curPlayList[SongIndex].id);
				this.dura();
			},
			dura(){
				console.log(this.Audio.duration);
			},

		}
	};
</script>

<style type="text/css" lang="scss">
	.bottom{
		position: fixed;
		width: 100%;
		height: 60px;
		bottom: 0;
		left: 0;
		right: 0;
		color: #ffffff;
		background: rgba(0,0,0,.6);
		padding:0 2%;
		font-size: 13px;
		display: flex;
		justify-content:space-around;
		align-items:center;
		.center{
			flex:6;
			span{
				display: inherit;
				margin-bottom: 4px;
				em{
					color: #b5b5b5;
					font-style: normal;
				}
			}
		}
		.left{
			flex:3;
		}
		.right{
			flex:2;
			text-align: right;
		}
		i{
			font-size: 26px;
			cursor: pointer;
		}
	}
</style>